<template>
  <mt-cell v-bind:to="to" class="list list-mask" v-bind:isLink="isLink">
      <span slot="title" class="al-center">
        <i v-bind:class="leftIcon" class="iconfont font18 mr15" v-if="leftIcon" :style="leftStyle"
           v-on:click="action"></i>
        <img class="avatar mr15 img-radius" alt="" v-if="img" :width="width?width:'43'" :height="width?width:'43'"
             v-bind:src="img"/>
        <div class="list-inline">
          <div class="mint-cell-text" :style="lefttitleStyle">{{title}}</div>
          <div class="mint-cell-label" v-if="label">{{label}}</div>
        </div>
        <span class="tag-admin ml15" v-if="tagName">{{tagName}}</span>
      </span>
    <span v-on:click="rigClick">
        <span :class="{'sValue':sVal,'black':bVal}" :style="valStyle">{{value}}</span>
        <i v-bind:class="rightIcon" v-if="rightIcon" class="iconfont font18" :style="rightStyle"></i>
        <mt-button size="small" type="primary" v-if="rightBtn">{{rightBtn}}</mt-button>
        <mt-badge size="small" color="red" v-if="badgeName">{{badgeName}}</mt-badge>
      </span>
  </mt-cell>
</template>
<script>
  export default {
    /**
     * @module common/plugins/cell
     * @author zah
     * @description 列表组件
     * @example <dc-cell :to="'/hello'" :title="'龙决策'" :img="1.png" :width="'80'" isLink></dc-cell>
     * @example <dc-cell  :title="'龙决策'" value="'详情'" :sVal="'gray'" :rightIcon="'icon-register-account'" :rightStyle={fontSize:'12px'}" ></dc-header>

     */
    /**
     * @property {String}  title          - 左侧标题.
     * @property {String}  label          - 左侧描述信息.
     * @property {String}  to             - 需要跳转的页.
     * @property {String}  img            - 图片.
     * @property {String}  value          - 右侧文字.
     * @property {String}  rightIcon      - 右侧图标.
     * @property {String}  leftIcon       - 左侧图标.
     * @property {String}  bVal           - 右侧文字为黑色.
     * @property {String}  width          - 左侧图片的宽度.
     * @property {String}  valStyle       - 右侧文字自定义样式
     * @property {String}  sVal           - 右侧文字变小.
     * @property {String}  leftStyle      - 左侧图标的样式.
     * @property {String}  lefttitleStyle - 左侧说明文字样式.
     * @property {String}  rightStyle     - 右侧图标的样式.
     * @property {String}  tagName         - 标签.
     * @property {String}  badgeName       - 右侧徽章.
     */
    props: {
      title: String,
      label: String,
      to: [String, Object],
      img: String,
      value: String,
      rightIcon: String,
      leftIcon: String,
      isLink: String,
      width: String,
      tagName: String,
      rightBtn: String,
      leftStyle: {},
      lefttitleStyle: {},
      rightStyle: {},
      badgeName: Number,
      sVal: String,
      bVal: String,
      valStyle: {}
    },
    data () {
      return {};
    },
    methods: {
      action: function () {
        this.$emit('changeClick');
      },
      rigClick: function () {
        this.$emit('valClick');
      }
    }
  };
</script>
<style lang="scss">
  @import "../assets/css/variable";

  .list {
    background-size: 100% 0;
    display: flex;
    .list-inline {
      display: inline-block;
      .mint-cell-label{
        font-size: px2rem(28px);
        margin-top: 10px;
      }
    }
    .font18 {
      font-size: px2rem(48px);
    }
    .sValue {
      font-size: px2rem(28px);
    }
    .al-center {
      display: flex;
      align-items: center;
    }
    .black {
      color: #333;
    }
    .img-radius {
      border-radius: 50%;
    }
    .mr15 {
      margin-right: 15px;
    }
  }
</style>
